<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Covid-19 ChatBot Admin</title>
  <link rel="stylesheet" href="/../css/bootstrap.min.css">
  <link rel="stylesheet" href="/../css/covidData.css">

</head>

<body>
  <div id="wrapper" class="container mt-1">
    <!-- NavBar -->
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <h3 class="navbar-brand mr-5">COVID-19 ChatBot</h3>
      <ul class="navbar-nav ml-5">
        <li class="nav-item ml-5">
          <a class="nav-link active" href="/covidData">Covid-19 Data</a>
        </li>
        <li class="nav-item ml-5">
          <a class="nav-link" href="/">New Questions</a>
        </li>
        <li class="nav-item ml-5">
          <a class="nav-link" href="/nonCovidData">Non-Covid Data</a>
        </li>
      </ul>
    </nav>
    <h4 class="text-center mt-3 mb-3 text-muted">Click on record to edit.</h4>
    <!-- Table -->
    <table class="table table-dark table-striped table-hover">
      <thead class="thead-light">
        <tr>
          <th></th>
          <th class="text-center">Questions</th>
          <th class="text-center">Answers</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div class="scrollup arrBtnDiv">
    <button class="arrBtn p-0 btn btn-dark">&#8679;</button>
  </div>
  <!-- Edit Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Record</h4>
          <button type="button" class="close">&times;</button>
        </div>
        <form action="/api/editDB" method="POST">
          <div class="modal-body">
            <div class="form-group">
              <input name="_id" type="hidden" class="form-control" id="id">
            </div>
            <div class="form-group">
              <label for="question">Question:</label>
              <textarea name="question" class="form-control" rows="5" id="question"></textarea>
            </div>
            <div class="form-group">
              <label for="answer">Answer:</label>
              <textarea name="answer" class="form-control" rows="5" id="answer"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success">Save</button>
            <button type="button" class="btn btn-danger" id="deleteBtn">Delete Record</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Delete Modal -->
  <div class="modal" id="deleteModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Are you sure you want to delete this record?</h4>
          <button type="button" class="close">&times;</button>
        </div>
        <div class="modal-body">
          <p>Deleting this record will result in the permanant deletion of this record from the database. <br><strong>
              Are you sure you would like
              to continue?</strong></p>
        </div>
        <div class="modal-footer">
          <button class="closeDelete btn btn-dark">Exit</button>
          <a id="deleteBtn2" href="#"><button type="button" class="btn btn-danger">Delete Record</button></a>
        </div>
      </div>

      <script type="text/javascript" src="/../js/jquery-3.3.1.min.js"></script>
      <script type="text/javascript" src="/../js/covidData.js"></script>
</body>

</html>